<template>
  <view class="orderNav">
    <ul class="nav">
      <li
        v-for="(item,index) in navList"
        :key="item"
        :class="{active:!(index-menuIndex)}"
        @click="index== 3 ?service() : menuShow(index)"
      >{{ item }}</li>
    </ul>
    <div v-show="menuIndex == 0">
      <orders :orders="orders" />
    </div>
    <div v-show="menuIndex == 1">
      <orders :orders="orders.filter(order=>order.status_display == 'UNPAID')" />
    </div>
    <div v-show="menuIndex == 2">
      <orders :orders="orders.filter(order=>order.status_display == 'NORMAL')" />
    </div>
    <div v-show="menuIndex == 3">
      退款/售后
      <!--此处可以换成子组件-->
    </div>
  </view>
</template>
<script>

import orders from '@com/mine/orders'
import { showToast } from '@utils/myApproach'

export default {
  components: {
    orders
  },
  props: {
    orders: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      menuIndex: 0,
      navList: ['全部订单', '待付款', '可使用', '退款/售后']
    }
  },
  methods: {
    menuShow(index) {
      this.menuIndex = index
    },
    service() {
      showToast('敬请期待')
    }
  }
}
</script>
<style>
.orderNav {
  background-color: #F8F8F8;
}
.nav {
  display: flex;
  justify-content: space-around;
  font-size: 32rpx;
}
.nav > li {
  position: relative;
  box-sizing: border-box;
  padding: 20rpx 14rpx;
  color: #9b9b9b;
}
/* 选中 */
.nav > .active {
  color: #000000;
}
.nav > .active::after {
  content: "";
  display: inline-block;
  bottom: 0;
  width: 100rpx;
  height: 8rpx;
  border-radius: 8rpx;
  background-color: #306de9;

  position: absolute;
  left: calc(50% - 50rpx);
  bottom: 0;
}
</style>
